<template>
	<view class="searchPage bg-fff">
		<view class="content">
			<view class="items">
                <block v-for="(item,index) in productList" :key="index">
                    <view class="prodItem">
                        <product-item :product="item"></product-item>
                    </view>
                </block>
                <block v-if="productList.length !== 0 && loadingType == 'nomore'">
                    <view class="empty flex font13 col-grey">暂无更多</view>
                </block>

				<up-empty text="暂无数据" mode="list" marginTop="100" v-if="productList.length === 0 && loadingType == 'nomore'"></up-empty>

                <up-loadmore :status="loadingType" margin-top="30" v-if="productList.length > 0" />
			</view>
		</view>
	</view>
</template>

<script>
	import { loadStationProducts } from '@/common/api/houses';
	export default {
		components: {
		},
		data() {
			return {
				cityCode: '',
				subway: '',
				station: '',
				next: '',
				loadingType: 'loadmore',
				params: '',
				productList: [],
			}
		},
		onLoad(options) {
			this.cityCode = options.city || '310100';
			this.subway = options.subway || '';
			this.station = options.station || '';
			uni.$check_and_login(this.init);
		},
		onPullDownRefresh() {
			this.reset();
			this.setParams();
			this.loadData();
		},
		onReachBottom(){
			this.loadData()
		},
		methods: {
			reset(){
				this.productList = [];
				this.next = '';
				this.loadingType = 'loadmore';
				this.params = '';
			},
			setParams(){
				this.params = {
					area: '',
					street: '',
					subway: this.subway,
					station: this.station,
					amount: '',
					house: '',
					size: '',
					more: '',
					city: this.cityCode,
					keyword: '',
				}
			},
			init(){
				this.setParams();
				this.loadData();
			},
			//加载数据
			async loadData(){
				if(this.loadingType === 'loading' || this.loadingType === 'nomore')return;
				this.loadingType = 'loading';
				let url = this.next == '' || this.productList.length == 0 ? '/product/mall/v6/query' : this.next;
				
				uni.showLoading({
					title: '数据加载中',
					mask: true
				})
				try{
					let { status, detail } = await loadStationProducts(url, this.params);
					if(status !== 0){
						uni.$u.toast(detail);
						return;
					}
					this.productList.push(...detail.results)
					this.next = detail.next
					this.loadingType = this.next ? 'loadmore' : 'nomore';
					uni.stopPullDownRefresh();
					uni.hideLoading()
				}catch(err){
					uni.stopPullDownRefresh();
					uni.hideLoading()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchPage{
		position: relative;
        min-height: 100vh;
		.content {
			padding: 0 28rpx;
		}
		.content-text {
			font-size: 18px;
			color: #333;
		}
		.color-tag {
			width: 25px;
			height: 25px;
		}
		.items{
			width: 100%;
            .prod{
                padding: 10rpx 30rpx;
                border-bottom: 1rpx solid rgba(0,0,0,.05);
                &:last-child{
                    border: none;
                }
            }
		}
	}

</style>
